<template>
<div class="app-container">
    <loading v-show="loading"></loading>
    <el-card class="box-card" style="margin-bottom:1%;">
      <div slot="header" class="clearfix">
        <span>考核周期基本信息</span>
        <div class="btn-box">
        <el-button
              size="mini"
              type="primary"
              @click="$router.back(-1)" style="margin-right:20px;">返 回</el-button>
        </div>
      </div>
      <el-form ref="detailData"  :model="detailData" label-width="140px" class="detailStyle">
        <el-row>
          <el-col :span="12">
            <span class="labelSpan">
              考核周期名称:
            </span>
            <span class="valueSpan">{{detailData.assessmenCycle}}</span>
          </el-col>
          <el-col :span="12">
            <span class="labelSpan">考核周期起始时间: </span>
            <span class="valueSpan">{{detailData.assessmenBeginTime}} -- {{detailData.assessmenEndTime}}</span>
          </el-col>
        </el-row>
      </el-form>
    </el-card>
    <el-card class="box-card" style="margin-bottom:1%;">
        <div slot="header" class="clearfix">
          <span>自查自评</span>
          <div class="btn-box">
          <el-button
              size="mini"
              type="primary"
              v-if="selfReportedData.length !== 0"
              icon="el-icon-plus"
              @click="saveReport" style="margin-right:20px">提交</el-button>
          </div>
        </div>
        <el-table
          :data="selfReportedData"
          border
          max-height="450"
          ref="tableData"
          style="width: 100%;margin-bottom:1%;"
          >
          <el-table-column
            label="指标类型"
            width="180">
            <template slot-scope="scope">
              <span style="margin-left: 10px">{{ scope.row.ndexTypeKey }}</span>
            </template>
          </el-table-column>
          <el-table-column
            label="考核指标名称"
          >
            <template slot-scope="scope">
              <span style="margin-left: 10px">{{ scope.row.jgIndexName }}</span>
            </template>
          </el-table-column>
          <el-table-column
            label="权重"
          >
            <template slot-scope="scope">
              <span style="margin-left: 10px">{{ scope.row.weights }}</span>
            </template>
          </el-table-column>
          <el-table-column
            label="评分"
            width="200"
          >
            <template slot-scope="scope">
              <el-input-number v-model="scope.row.score" :min="0" :max="scope.row.weights" label="请输入评分值"></el-input-number>
            </template>
          </el-table-column>
        </el-table>
      </el-card>
</div>
</template>
<script>
import Loading from '@/components/loading/loading'
import { getSelfReported, savaReportData } from '@/api/partyBranch/selfReported'
export default {
  components: {
    Loading
  },
  data() {
    return {
      searchData: {
        cycleAssessmenKey: ''
      },
      num: 0,
      loading: false,
      detailData: {
        assessmenBeginTime: '',
        assessmenCycle: '',
        assessmenEndTime: '',
        createTime: '',
        cycleAssessmenKey: '',
        modifyTime: '',
        releaseState: ''
      },
      details: [],
      DzbIndexHistory: [],
      selfReportedData: [],
      addform: [{
        assessmenDetailKey: '',
        score: 0
      }],
      rules: {
        score: [
          { required: true, message: '请输入考核周期名称', trigger: 'blur' }
        ]
      },
      saveData: {
        data: {
          dzbAssessmenDetailArray: []
        }
      }
    }
  },
  created() {
    this.loading = true
    this.searchData.cycleAssessmenKey = this.$route.query.cycleAssessmenKey
    this.getgetSelfReportedList()
  },
  methods: {
    getgetSelfReportedList() {
      getSelfReported(this.searchData).then(response => {
        this.detailData = response.data.entity
        this.details = response.data.details
        this.DzbIndexHistory = response.data.DzbIndexHistory
        this.details.forEach((element) => {
          const elements = this.DzbIndexHistory.find(item => item.indexHistoryKey === element.jgIndexHistoryKey)
          if (elements) {
            const data = Object.assign(element, elements)
            this.selfReportedData.push(data)
          }
        })
        this.loading = false
      }).catch(error => {
        this.loading = false
        console.log(error)
      })
    },
    saveReport() {
      for (const item in this.selfReportedData) {
        if (this.selfReportedData[item].score !== undefined) {
          this.saveData.data.dzbAssessmenDetailArray.push({
            assessmenDetailKey: this.selfReportedData[item].assessmenDetailKey,
            score: this.selfReportedData[item].score
          })
        } else {
          this.saveData.data.dzbAssessmenDetailArray = []
          break
        }
      }
      if (this.saveData.data.dzbAssessmenDetailArray.length !== 0) {
        this.loading = true
        this.saveData.cycleAssessmenKey = this.$route.query.cycleAssessmenKey
        this.saveData.data = JSON.stringify(this.saveData.data)
        savaReportData(this.saveData).then(response => {
          this.loading = false
          this.$router.push({
            path: 'partyBranchCircle',
            name: '考核周期管理'
          })
          this.saveData = {
            data: {
              dzbAssessmenDetailArray: []
            }
          }
        }).catch(error => {
          this.saveData.data = JSON.parse(this.saveData.data)
          this.loading = false
          console.log(error)
        })
      } else {
        this.$message({
          showClose: true,
          message: '有待评分项未评分',
          type: 'warning'
        })
      }
    }
  }
}
</script>
<style lang="scss" scoped>
.el-form-item{margin-bottom:0;}
</style>
